<template>
<div class="userdetail">
  <div>
    <div class="user_img">
      <img :src="userInfo.user_img" alt="" v-if="userInfo.user_img">
      <img src="@/assets/head.png" alt="" v-else>
    </div>
    <div class="user_info">
      <div>
      <p>
        <span>0</span>
        <span class="user_text">粉丝</span>
      </p>
      <p>
        <span>50</span>
        <span class="user_text">关注</span>
      </p>
      <p>
        <span>100</span>
        <span class="user_text">获赞</span>
      </p>
      </div>
      <div @click="$router.push('/edit')">
        <div class="user_eidt">编辑资料</div>
      </div>
    </div>
  </div>
  <div>
    <h3>{{userInfo.name}}</h3>
    <p v-if="userInfo.user_desc">{{userInfo.user_desc}}</p>
    <p v-else>这个人啥都不会</p>
  </div>
</div>
</template>

<script>
export default {
  name: "userDetail",
  props:['userInfo']
}
</script>

<style scoped lang="less">
.userdetail{
  background-color: white;
  padding:0 4.17vw;
  >div:nth-child(1){
    display: flex;
    .user_img{
      margin-right: 5.56vw;
      img{
        height: 23.61vw;
        width: 23.61vw;
        border-radius: 50%;
      }
    }
    .user_info{
      flex: 1;
      div:nth-child(1){
        display: flex;
        p{
          margin: 1.39vw 0;
          flex: 1;
          justify-content: center;
          align-items: center;
          display: flex;
          flex-direction: column;
          font-size: 3.61vw;
          .user_text{
            color: #aaa;
          }
        }
        p:nth-child(1),p:nth-child(2){
          border-right: 1px solid #ccc;
        }
      }
      div:nth-child(2){
        padding: 2.78vw 4.17vw;
        .user_eidt{
          border: 1px solid #fb7a9f;
          justify-content: center;
          align-items: center;
          color: #ff9db5;
          border-radius: 1.39vw;
        }
      }
    }
  }
  >div:nth-child(2){
    h3{
      margin: 1.39vw 0;
      font-weight: 400;
    }
  p{
    padding:0;
    margin:1.39vw 0;
    font-size: 4.17vw;
    color: #999;
  }
  }

}
</style>
